<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>员工列表</title>
        <header th:replace="header::html"></header>
    </head>
    <body>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                            <button class="layui-btn" onclick="xadmin.open('添加用户','#')"><i class="layui-icon"></i>添加</button>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                  <tr>
                                    <th width="10px">
                                      <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                                    </th>
                                    <th width="10px">员工名</th>
                                    <th>身份证</th>
                                    <th>手机号</th>
                                    <th>入职日期</th>
                                    <th>隶属部门</th>
                                    <th>职位名称</th>
                                    <th>状态</th>
                                    <th>操作</th></tr>
                                </thead>

                                <tbody>
                                  <tr th:each="user : ${users.list}">
                                    <td>
                                      <input type="checkbox" name="id" value="1" th:value="${user.id}" lay-skin="primary">
                                    </td>
                                    <td th:text="${user.username}">小明</td>
                                    <td th:text="${user.idCart}">421302199904273119</td>
                                    <td th:text="${user.phone}">13926570711</td>
                                    <td th:text="${#temporals.format(user.createTime,'yyyy-MM-dd')}">1999-04-27</td>
                                    <td th:text="${user.department.name}">科技部</td>
                                    <td th:text="${user.position.name}">Java开发</td>
                                    <td class="td-status">
                                      <span class="layui-btn layui-btn-normal layui-btn-mini" th:classappend="${user.status==false} ? 'layui-btn-disabled' : '' " th:text="${user.status==false} ? '已停用' : '已启用'" >已停用</span></td>
                                    <td class="td-manage">
                                      <a onclick="return confirm('你确定要启用或停用吗？')" th:href="@{/employee/{id}/change(id=${user.id})}"  title="启用">
                                        <i class="layui-icon">&#xe601;</i>
                                      </a>
                                      <a title="编辑"  onclick="xadmin.add_tab( '编辑','#') " href="javascript:;">
                                        <i class="layui-icon">&#xe642;</i>
                                      </a>
                                      <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                                        <i class="layui-icon">&#xe640;</i>
                                      </a>
                                    </td>
                                  </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="layui-card-body ">
                            <div class="page">
                                <div>
                                  <a class="prev" href="" th:href="@{/employee/(pageNum=${users.hasPreviousPage}?${users.prePage}:1)}">上一页</a>
                                  <a class="next" href="" th:href="@{/employee/(pageNum=${users.hasNextPage}?${users.nextPage}:${users.pages})}">下一页</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </body>
    <script>
      layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function(data){

          if(data.elem.checked){
            $('tbody input').prop('checked',true);
          }else{
            $('tbody input').prop('checked',false);
          }
          form.render('checkbox');
        });




      });

      //  /*用户-停用*/
      // function member_stop(obj,id){
      //     layer.confirm('确认要停用或启用吗？',function(index){
      //
      //         if($(obj).attr('title')=='启用'){
      //
      //           //发异步把用户状态进行更改
      //           $(obj).attr('title','停用')
      //           $(obj).find('i').html('&#xe62f;');
      //
      //           $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
      //           layer.msg('已停用!',{icon: 5,time:1000});
      //
      //         }else{
      //           $(obj).attr('title','启用')
      //           $(obj).find('i').html('&#xe601;');
      //
      //           $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
      //           layer.msg('已启用!',{icon: 5,time:1000});
      //         }
      //     });

    </script>
</html>